<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">企业名称：</div>
      <el-input v-model="name" clearable placeholder="请输入内容" class="search-main" />
      <el-button type="primary" @click="searchList">查询</el-button>
    </div>
    <div class="create-container">
      <el-button v-auth="'park:enterprise:add_edit'" type="primary" @click="$router.push('/exterpriseAdd')">添加企业</el-button>
      <el-button type="primary" @click="exportExterprise">导出企业</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="exterpriseList" @expand-change="expandChange">
        <!-- 要折叠的内容区域 -->
        <el-table-column type="expand">
          <!-- props是当前这一行的数据 -->
          <!-- 3.通过作用域插槽接收每一行的数据，把合同的字段渲染到展开的新的table中 -->
          <template #default="props">
            <!-- 调试代码：确定props.row是修改数据而不是新增数据 -->
            <!-- <div>111{{ props.row }}</div> -->
            <el-table :data="props.row.rentData">
              <el-table-column label="租赁楼宇" width="320" prop="buildingName" />
              <el-table-column label="租赁起始时间" prop="startTime" />
              <el-table-column label="合同状态" prop="status">
                <template #default="prop">
                  <el-tag :type="formatType(prop.row.status)">{{ formatStatus(prop.row.status) }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template>
                  <el-button size="mini" type="text">续租</el-button>
                  <el-button size="mini" type="text">退租</el-button>
                  <el-button size="mini" type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" />
        <el-table-column label="企业名称" width="320" prop="name" />
        <el-table-column label="联系人" prop="contact" />
        <el-table-column label="联系电话" prop="contactNumber" />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button size="mini" type="text" @click="addRent(row.id)">添加合同</el-button>
            <!-- 1.路径参数传递id -->
            <!-- <el-button size="mini" type="text" @click="$router.push('/exterpriseDetail/'+row.id)">查看</el-button> -->
            <!-- 2.查询参数传递id -->
            <el-button size="mini" type="text" @click="$router.push('/exterpriseDetail?id='+row.id)">查看</el-button>
            <el-button size="mini" type="text" @click="editRent(row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="deleteRent(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="currentChange"
      />
    </div>
    <!-- 弹层放置的位置:
      最根级的最后面
     -->
    <!-- 新增合同弹层 -->
    <el-dialog
      title="添加合同"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <!-- 中间部分的区域，使用默认插槽 -->
      <template #default>
        <!-- 表单模版 -->
        <div class="form-container">
          <el-form ref="addForm" :model="rentForm" :rules="rentRules" label-position="top">
            <!-- 租赁楼宇 -->
            <el-form-item label="租赁楼宇" prop="buildingId">
              <el-select v-model="rentForm.buildingId" placeholder="请选择">
                <el-option
                  v-for="item in rentBuildList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <!-- 租赁日期 -->
            <el-form-item label="租赁起止日期" prop="rentTime">
              <el-date-picker
                v-model="rentForm.rentTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              />
            </el-form-item>
            <!-- 租赁合同 -->
            <el-form-item label="租赁合同" prop="contractId">
              <!--
              action="#"不默认上传
              :http-request="uploadContract"上传的方法
              :before-upload="beforeUpload"上传前执行的方法
              :file-list="fileList"已上传的文件列表
              -->
              <el-upload
                action="#"
                :http-request="uploadContract"
                :before-upload="beforeUpload"
                :file-list="fileList"
                :on-remove="handleRemove"
              >
                <el-button size="small" type="primary" plain>上传合同文件</el-button>
                <div slot="tip" class="el-upload__tip">支持扩展名：.doc .pdf, 文件大小不超过5M</div>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <!-- slot="footer" 具名插槽的过时写法 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="createRent">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
// 从xlsx包模块中导出需要的方法
// utils就是xlsx提供的工具函数
import { utils, writeFileXLSX } from 'xlsx'
import { getEnterpriseListAPI, deleteEnterpriseAPI, getRentBuildListAPI, uploadAPI, createRentAPI, getRentListAPI } from '@/api/enterprise'
export default {
  data() {
    return {
      exterpriseList: [],
      page: 1,
      pageSize: 20,
      name: '',
      total: 0,
      // 控制弹层显示隐藏的变量
      dialogVisible: false,
      // 添加合同的数据
      rentForm: {
        buildingId: null, // 楼宇id
        contractId: null, // 合同id
        contractUrl: '', // 合同Url
        enterpriseId: null, // 企业名称
        type: 0, // 合同类型
        rentTime: [] // 合同时间
      },
      // 校验表单的规则
      rentRules: {
        buildingId: [
          { required: true, message: '请选择楼宇', trigger: 'change' }
        ],
        rentTime: [
          { required: true, message: '请选择租赁日期', trigger: 'change' }
        ],
        contractId: [
          { required: true, message: '请上传合同文件' }
        ]
      },
      // 渲染可租赁的楼宇列表
      rentBuildList: [],
      // 日期选择禁用配置(只能选中某一段时间)
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        }
      },
      // 已上传的合同列表
      fileList: []
    }
  },
  created() {
    // 企业列表
    this.getExterpriseList()
    // 楼宇的列表获取(用于新增合同时选择楼宇)
    this.getRentBuildList()
  },
  methods: {
    async getExterpriseList() {
      // 测试后台接口是否能调通
      const { data } = await getEnterpriseListAPI({
        page: this.page,
        pageSize: this.pageSize,
        name: this.name
      })

      // 1.在初始化数据的时候就把合同的字段预留下，放置动态新增数据不会让UI发生更新
      const newData = data.rows.map(item => {
        return {
          ...item,
          rentData: []
        }
      })
      this.exterpriseList = newData
      this.total = data.total
    },
    currentChange(val) {
      this.page = val
      this.getExterpriseList()
    },
    searchList() {
      this.page = 1
      this.getExterpriseList()
    },
    // 编辑合同
    editRent(id) {
      this.$router.push({
        path: '/exterpriseAdd',
        query: {
          id
        }
      })
    },
    // 删除合同
    deleteRent(id) {
      // 弹出确认框
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteEnterpriseAPI(id)
        this.$message.success('删除成功')
        // 删除后可能不是当前页，需要重新查询
        this.searchList()
      }).catch(err => err)
    },
    // 获取未租赁的楼宇列表
    async getRentBuildList() {
      const res = await getRentBuildListAPI()
      this.rentBuildList = res.data.rows
    },
    // 添加合同
    addRent(id) {
      // 记录当前添加合同的企业id
      this.rentForm.enterpriseId = id
      // 打开弹层
      this.dialogVisible = true
    },
    // 上传合同的方法
    async uploadContract(data) {
      // data.file要上传的文件
      const formData = new FormData()
      formData.append('file', data.file)
      formData.append('type', 'contract')
      const res = await uploadAPI(formData)
      console.log(res)
      if (res.code === 10000) {
        this.rentForm.contractId = res.data.id
        this.rentForm.contractUrl = res.data.url
        // 合同上传成功
        this.fileList.push({
          url: res.data.url,
          name: res.data.name
        })
        // 再次校验(单独的属性校验)
        this.$refs.addForm.validateField('contractId')
      }
    },
    // 给企业创建新的合同
    createRent() {
      // 表单校验
      this.$refs.addForm.validate(async(valid) => {
        if (valid) {
          const form = {
            ...this.rentForm
          }
          // 1.新增缺少的字段(开始时间必须大于当前时间才能通过验证)
          form.startTime = form.rentTime[0]
          form.endTime = form.rentTime[1]
          // 2.移除多余的字段
          delete form.rentTime
          console.log(form)
          // 校验表单(TODO)
          const res = await createRentAPI(form)
          if (res.code === 10000) {
            this.$message.success('新增合同成功')
          } else {
            this.$message.error('新增失败,' + res.msg)
          }
        }
      })
    },
    // 上传文件前的校验
    beforeUpload(file) {
      // pdf格式application/pdf
      // doc格式application/msword
      const fileTypeList = ['application/pdf', 'application/msword']
      // 是否支持的文件类型
      const isSupporType = fileTypeList.includes(file.type)
      if (!isSupporType) {
        this.$message.error('上传的类型只支持doc和pdf')
        // 返回false表示阻止上传文件
        return false
      }
      const maxSize = 3 * 1024 * 1024
      if (file.size > maxSize) {
        this.$message.error('文件最大支持 5 MB')
        // 返回false表示阻止上传文件
        return false
      }
    },
    // 移除文件的方法
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    // 表格行展开收齐事件
    async expandChange(row, rows) {
      console.log(row)
      // 2.获取合同列表的数据，进行修改
      const res = await getRentListAPI(row.id)
      // eslint-disable-next-line require-atomic-updates
      row.rentData = res.data
    },
    formatStatus(status) {
      const statusObj = {
        0: '待生效',
        1: '生效中',
        2: '已到期',
        3: '已退租'
      }
      return statusObj[status]
    },
    formatType(status) {
      const typeObj = {
        0: 'warning',
        1: 'success',
        2: 'info',
        3: 'danger'
      }
      return typeObj[status]
    },
    // 将企业导出为excel
    exportExterprise() {
      // 1.下载xlsx包
      // 2.绑定点击事件，添加导出方法
      // 导出实现：
      // 1.1利用utils创建一个新的页签（xlsx文件）
      const file = utils.book_new()
      // 1.2还需要sheet页，sheet页才是真正放数据的地方
      const sheet = utils.json_to_sheet(
        // 数据不论多复杂都可以自动转换成sheet
        // 数据的key默认就是表头
        // [
        //   { user: '张三', info: 18 },
        //   { user: '李四', info: 19 }
        // ]
        this.exterpriseList
      )
      // 1.3把准备好的sheet加入到xlsx中
      utils.book_append_sheet(file, sheet, 'sheet的名字')
      // 重写表头的操作：二维数组表示表头占据几行几列，origin表示表头起点的位置
      // utils.sheet_add_aoa(sheet, [['姓名', '年龄']], { origin: 'C1' })
      // 1.4将准备的好book变为真正的文件
      writeFileXLSX(file, '导出文件的名称.xlsx')
    }
  }
}
</script>

<style lang="scss" scoped>
.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
